<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>支付成功</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            color: #333;
            padding: 20px;
        }
        
        .container {
            text-align: center;
            width: 100%;
            max-width: 400px;
        }
        
        .status-text {
            font-size: 1.2rem;
            margin-bottom: 3rem;
            color: #06ae56;
            font-weight: 500;
        }
        
        .countdown-circle {
            position: relative;
            width: 60vw;
            height: 60vw;
            max-width: 200px;
            max-height: 200px;
            margin: 0 auto 2rem;
        }
        
        .circle-background {
            fill: none;
            stroke: #e0e0e0;
            stroke-width: 8;
        }
        
        .circle-progress {
            fill: none;
            stroke: #06ae56;
            stroke-width: 8;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            animation: countdown 5s linear forwards;
        }
        
        .countdown-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            font-weight: bold;
            color: #06ae56;
        }
        
        @keyframes countdown {
            from {
                stroke-dasharray: 0 314;
            }
            to {
                stroke-dasharray: 314 314;
            }
        }
        
        .tips {
            font-size: 0.9rem;
            color: #999;
            margin-top: 2rem;
        }
        .back-button {
             display: block;
             margin: 20px auto;
             padding: 10px 20px;
             background-color: #f0f0f0;
             border: 1px solid #ddd;
             border-radius: 4px;
             cursor: pointer;
             font-size: 16px;
         }

        .back-button:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
<div class="container">
    <input type="hidden" value="{$order_no}" name="order_no">
    <input type="hidden" name="gid" value="{$gid}">
    <div class="status-text" id="order_status">订单查询中...</div>

    <div class="countdown-circle">
        <svg viewBox="0 0 100 100">
            <circle class="circle-background" cx="50" cy="50" r="45"></circle>
            <circle class="circle-progress" cx="50" cy="50" r="45"></circle>
        </svg>
        <div class="countdown-text">5</div>
    </div>

    <div class="tips">页面将在<span id="countdown-tip">5</span>秒后自动跳转</div>

    <!-- 添加的返回按钮 -->
    <button class="back-button" onclick="window.close()">返回上一页</button>
</div>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/layui/layui.all.js"></script>
    <script>
        // 倒计时动画
        const countdownText = document.querySelector('.countdown-text');
        const countdownTip = document.getElementById('countdown-tip');
        let timeLeft = 5;
        
        const countdownInterval = setInterval(() => {
            timeLeft--;
            countdownText.textContent = timeLeft;
            countdownTip.textContent = timeLeft;
            
            if (timeLeft <= 0) {
                clearInterval(countdownInterval);

                try {
                    window.close();
                } catch (e) {
                    // 如果关闭失败，显示提示信息
                    document.querySelector('.tips').textContent = "请手动关闭此窗口";
                }

                // 这里可以添加倒计时结束后跳转的逻辑
                // window.location.href = "order-detail.html";
                // $.ajax({
                //     url: '/game/order/query',
                //     type: 'POST',
                //     data: {
                //         order_no: orderNo,
                //         gid: data.field.gid
                //     },
                //     success: function(response) {
                //         layer.close(loading);
                //         $('.result-card').show();
                //
                //         if (response.code === 1) {
                //             const data = response.data;
                //             $('#order_status').val(data.order_status === 1 ? '支付成功' : '未支付');
                //         } else {
                //             layer.msg(response.msg || '查询失败', {icon: 2});
                //         }
                //     },
                //     error: function() {
                //         layer.close(loading);
                //         layer.msg('查询失败，请稍后重试', {icon: 2});
                //     }
                // });
            }
        }, 1000);
    </script>
</body>
</html>